<template>
  <div class="identity-box">

    <v-step :step=1></v-step>

    <div class="line-box"></div>

    <div class="wrap-box">
      <div class="title1">姓名:</div>
      <div class="title2"><input type="text" maxlength="5" placeholder="请输入真实姓名" class="input-box" v-model="certName"
                                 @input="checkName" @blur="inputBlur"/></div>
      <div class="title3">
        <img src="../../images/icon_1.png" class="icon" v-if="showName === 1" onclick="return false"/>
        <img src="../../images/icon_2.png" class="icon" v-else-if="showName === 2" onclick="return false"/>
      </div>
    </div>

    <div class="wrap-box">
      <div class="title1">身份证号:</div>
      <div class="title2"><input type="text" maxlength="18" placeholder="请输入身份证号" class="input-box" v-model="certNo"
                                 @input="checkCertNo" @blur="inputBlur"/></div>
      <div class="title3">
        <img src="../../images/icon_1.png" class="icon" v-if="showCertNo === 1" onclick="return false"/>
        <img src="../../images/icon_2.png" class="icon" v-else-if="showCertNo === 2" onclick="return false"/>
      </div>
    </div>

    <div class="btn-box" v-show="hideBtn">
      <button type="button" class="btn back" @click="backStep">上一步</button>
      <button type="button" class="btn next" @click="nextStep">下一步</button>
    </div>

    <v-dialog v-model="modalVal" :content="content" type="default" @sure="confirm"></v-dialog>
  </div>
</template>

<script>
  import step from "../../components/flow/flow"
  import dialog from "../../components/dialog/dialog"
  import {baseUrl} from "../../common/js/env"

  export default {
    data() {
      return {
        certNo: "",
        certName: "",
        showName: "",
        showCertNo: "",
        modalVal: false,
        content: "",
        userSign: "",
        docmHeight: document.documentElement.clientHeight,//默认屏幕高度
        showHeight: document.documentElement.clientHeight,//实时屏幕高度
        hideBtn: true//显示或者隐藏
      }
    },
    created() {
      let certNo = sessionStorage.getItem("identity_no");
      let certName = sessionStorage.getItem("bank_user_name");
      if (certName != "" && certName != undefined) {
        this.certName = certName;
      }
      if (certNo != "" && certNo != undefined) {
        this.certNo = this.$decruption(certNo);
      }

      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          this.showHeight = document.body.clientHeight;
        })()
      };
    },
    methods: {
      checkName() {//校验姓名
        let reg1 = /^[\u2E80-\u9FFF]+$/; //中文
        if (!reg1.test(this.certName)) {
          this.showName = 2;
        } else {
          this.showName = 1;
        }
      },
      checkCertNo() {//校验身份证
        let reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9Xx])$/; //身份证
        if (!reg.test(this.certNo)) {
          this.showCertNo = 2;
        } else {
          this.showCertNo = 1;
        }
      },
      checkBankCard() {//校验姓名和身份证
        let reg1 = /^[\u2E80-\u9FFF]+$/;
        let reg2 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9Xx])$/;
        if (this.certName == "" || this.certName == null) {
          this.$vux.toast.text("请输入持卡人姓名", "middle");
          return;
        } else if (!reg1.test(this.certName)) {
          this.$vux.toast.text("请输入中文姓名", "middle");
          return;
        }
        if (this.certNo == "" || this.certNo == null) {
          this.$vux.toast.text("请输入持卡人身份证号", "middle");
          return;
        } else if (!reg2.test(this.certNo)) {
          this.$vux.toast.text("请输入正确的身份证号，最后一位是字母时要大写", "middle");
          return;
        }
        return true;
      },
      backStep() {//上一步
        sessionStorage.removeItem("bank_user_name");
        sessionStorage.removeItem("identity_no");
        this.$router.go(-1);
      },
      nextStep() {//下一步
        if (this.checkBankCard()) {
          this.$vux.loading.show({
            text: '加载中',
          });
          let data = {
            "identityNo": this.$encruption(this.certNo),
          };
          //查询身份证是否被占用
          this.axios.post(baseUrl + "/userbank/query_cardnoaccupy?sgin=" + this.userSign, data).then((res) => {
            let resultObj = res.data;
            this.$vux.loading.hide();
            if (resultObj.code == 20026) { //被占用
              this.content = resultObj.msg;
              this.modalVal = true;
            } else if (resultObj.code == 0) {
              sessionStorage.setItem("identity_no", this.$encruption(this.certNo));
              sessionStorage.setItem("bank_user_name", this.certName);
              this.$router.push("/cardScan");
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          }).catch(() => {
            this.$vux.loading.hide();
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      inputBlur() {
        window.scrollTo(0, 0)
      },
      confirm() {//身份证占用，强制绑定
        this.modalVal = false;
      },
      cancel() {
        this.modalVal = false;
      }
    },
    watch: {
      showHeight() {
        if (this.docmHeight > this.showHeight) {
          this.hideBtn = false;
        } else {
          this.hideBtn = true;
        }
      }
    },
    components: {
      "v-dialog": dialog,
      "v-step": step,
    }
  }
</script>

<style lang="stylus" scoped>
  .identity-box
    width: 100%
    height: 100%
    overflow: hidden
    .line-box
      margin-top: 0.493rem
      height: 0.28rem
      background: rgba(242, 242, 242, 1)
    .wrap-box
      display: flex
      align-items: center
      margin-left: 3.6%
      width: 96.4%
      height: 1.333rem
      border-bottom: 1px solid rgba(230, 230, 230, 1)
      .title1
        height: 0.56rem
        line-height: 0.56rem
        font-size: 0.44rem
        color: rgba(68, 68, 68, 1)
      .title2
        width: 60%
        padding-left: 0.107rem
        font-size: 0.44rem
        color: rgba(68, 68, 68, 1)
        .input-box
          width: 100%
          vertical-align: middle
          line-height: 0.56rem
          font-size: 0.44rem
          color: rgba(68, 68, 68, 1)
      .title3
        margin-left: auto;
        margin-right: 0.373rem;
        .icon
          width: 0.533rem
          height: 0.533rem
    .btn-box
      position: fixed
      bottom: 0.48rem
      width: 100%
      text-align: center
      .btn
        width: 45.33%
        height: 1.333rem
        border: 1px solid rgba(60, 175, 255, 1)
        border-radius: 0.107rem
        font-size: 0.48rem
      .back
        color: rgba(60, 175, 255, 1)
        background: rgba(255, 255, 255, 1)
      .next
        margin-left: 0.187rem
        color: rgba(255, 255, 255, 1)
        background: rgba(60, 175, 255, 1)
</style>
